<template>
  <div class="faq">
    <div class="title">FAQ</div>
    <div class="content">
      <a class="faq-item" :href="`/faq/${item.tag}?question=${item.title}`" v-for="item in faqList" :key="item.tag">
        <div class="faq-item-title">{{ item.title }}</div>
          <span><el-icon><ArrowRightBold /></el-icon></span>
      </a>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
    appName: {
        type: String,
        required: true
    }
})

const faqList = [
    {
        tag: 'download',
        title: `How to download and install ${props.appName}?`,
    }, {
        tag: 'system',
        title: `What are the system requirements of ${props.appName}?`,
    }, {
        tag: 'version',
        title: `How to get the latest version of ${props.appName}?`,
    }, {
        tag: 'alternative',
        title: `How to find a ${props.appName} alternative?`,
    }
]
</script>

<style scoped lang="scss">
  .faq {
    margin-top: 2rem;
    .title {
        @include title;
    }
    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin: 1rem 0;
        .faq-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            background: linear-gradient( 130deg, #FFF6EC 0%, rgba(255,218,178,0.13) 100%);
            color: #FF8500;
            padding: 20px 25px;
            border-radius: .2rem;
            cursor: pointer;
            text-decoration: none;
            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            .faq-item-title {
                font-weight: 600;
            }
        }
        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
  }
</style>
